<template>
  <div class="go-slider">
    <van-slider v-model="cup.capacity" :min="min" :max="max" @change="onChange">
      <template #button>
        <div class="buu"></div>
        <div class="custom-button"></div>
      </template>
    </van-slider>
  </div>
</template>

<script>
export default {
  name: "GoSlider",
  props: {
    min: {
      type: Number,
      default: 0
    },
    max: {
      type: Number,
      default: 3000
    },
    cup: {
      type: Object
    },
  },
  data() {
    return {
      drag: false
    }
  },
  methods:{
    onChange(){
      this.$emit('change')
    }
  }

}
</script>

<style lang="less" scoped>

.van-slider {
  position: relative;
  width: 250px;
  height: 6px;
  background: #7e8c9f;
  cursor: pointer;
}

.custom-button {
  width: 7px;
  height: 7px;
  opacity: 1;
}

.buu {
  content: '';
  opacity: 1;
  position: absolute;
  bottom: 200%;
  left: -100%;
  width: 20px;
  height: 20px;
  background-color: rgba(125, 194, 232);
  transform: rotateZ(45deg);
  border-radius: 50% 50% 0;
  border-color: transparent;
  transition: border .4s ease;
}


</style>